<template>
  <div>
    <el-form-item
      label="显示投票结果" v-if="activeData.config.optionType==='default'">
      <el-switch v-model="activeData.config.showVoteResult" />
    </el-form-item>
    <el-form-item
      label="其他输入必填" >
      <el-switch v-model="activeData.config.otherRequired" />
    </el-form-item>
    <el-form-item label="选项随机展示">
      <el-switch v-model="activeData.config.randomOption" />
    </el-form-item>
    <el-form-item
      v-if="activeData.config.randomOption"
    >
      <el-select
        v-model="activeData.config.selectRandomOption"
        multiple
        placeholder="请选择"
      >
        <el-option
          v-for="item in activeData.config.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item
      label="排列方式"
    >
      <el-radio-group v-model="activeData.config.inline">
        <el-radio-button :label="true">
          横向
        </el-radio-button>
        <el-radio-button :label="false">
          纵向
        </el-radio-button>
      </el-radio-group>
    </el-form-item>


    <el-form-item label="名额设置">
      <div class="cp" @click="$refs.optionQuotaDialog.openQuotaSetting()">
        <el-button size="mini" type="primary" v-if="isQuotaSetting">已设置</el-button>
        <el-button size="mini" v-else >未设置</el-button>
      </div>
    </el-form-item>
    <option-quota :active-data="activeData" ref="optionQuotaDialog"/>


<!--    <el-form-item
      v-if="activeData.config.optionType !== undefined"
      label="选项样式"
    >
      <el-radio-group v-model="activeData.config.optionType">
        <el-radio-button label="default">
          默认
        </el-radio-button>
        <el-radio-button label="button">
          按钮
        </el-radio-button>
      </el-radio-group>
    </el-form-item>-->

    <config-item-option :active-data="activeData" />
  </div>
</template>

<script>
import ConfigItemOption from './option'
import OptionQuota from "./optionQuota"

export default {
  name: 'ConfigItemRadio',
  components: { ConfigItemOption },
  props: ['activeData'],
  data() {
    return {
      dialogVisible: false,
      quotaSettingVisible: false,
      quota: "",
    };
  },
  created() {
    if (!Object.hasOwnProperty.call(this.activeData.config, 'withExclusiveChoice')) {
      this.activeData.config.withExclusiveChoice = false;
      this.activeData.config.exclusiveChoiceApiCodes = [];
      this.activeData.config.quotaBlankWarning = '';
      this.activeData.config.quotaCycleRule = 'fixed';
      this.activeData.config.hideQuota = false;
      this.activeData.config.hideChoiceWhenQuotaEmpty = false;
      this.activeData.config.quotaRecoverable = true;
    }
  },
  computed: {
    isQuotaSetting() {
      const arr = this.activeData.config.options.filter((e) => {
        return typeof e.quotaSetting === "number";
      });
      return arr.length;
    },
  },
  methods: {
    onQuotaSetting() {
      const {quota} = this;
      this.activeData.config.options.map((e) => {
        e.quota = quota;
        e.quotaSetting = quota;
        return e;
      });
      this.quotaSettingVisible = false;
    },
    onChangeQuota(scope) {
      scope.row.quota = scope.row.quotaSetting;
    }
  }
}
</script>

<style scoped>

</style>
